<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<ion-content style="background-color: #f7f6f5">
  <ion-list>
    <!--头部banner-->
    <div class="slider-container" style="background-color: white">
      <ion-slides #slides pager="true"  pager loop="true" autoplay="3000" *ngIf="bannerlistitem['length']>0">
        <ng-container *ngFor="let info of bannerlistitem;let i=index;">
          <ion-slide >
            <div class="slide" style="margin-top: 5px;margin-left: 5px;margin-right: 5px" (click)="urlEvent(info['url'],info['module'],info['oid'])">
              <img  style="width: 100%;height: 188px" src="http://www.bkqs8.com/photo/weChatApi/loadImg?path=headline&filename={{info['img']}}" />
              <!--<p class="slide-title">{{info['title']}}</p>-->
              <!--<p class="slide-text">{{info['imgContent']}}</p>-->
            </div>
          </ion-slide>
        </ng-container>

      </ion-slides>
    </div>

    <ion-grid style="background-color: white">
      <ion-row  style="background-color: #f7f6f5;margin-left: 6px;margin-right: 6px;border-radius: 5px 5px 5px 5px">
        <ion-col (click)="huodongqishinEvent()" no-lines>
          <div style="font-size:10px ">
            <img style="height: 45px;width: 45px;margin-bottom: 5px" src="assets/icon/huodongqishi1.png"><br>
            活动<br>启事
          </div>
        </ion-col>
        <ion-col (click)="zuopinEvent()" no-lines>
          <div style="font-size:10px ">
            <img style="height: 45px;width: 45px;margin-bottom: 5px" src="assets/icon/zuopinindex1.png"><br>
            作品<br>秀场
          </div>
        </ion-col>
        <ion-col (click)="huodongEvent()">
          <div style="font-size:10px ">
            <img style="height: 45px;width: 45px;margin-bottom: 5px" src="assets/icon/huodong_home.png"><br>
            <!--<img style="height: 45px;width: 45px;margin-bottom: 5px" src="assets/icon/homeb.png"><br>-->
            科普<br>活动
          </div>
        </ion-col>
        <ion-col (click)="kepuEvent()">
          <div style="font-size:10px ">
            <img style="height: 45px;width: 45px;margin-bottom: 5px" src="assets/icon/jianzhu_home.png"><br>
            科普<br>基地
          </div>
        </ion-col>
        <ion-col (click)="bozhulistEvent()">
          <div style="font-size:10px ">
            <img style="height: 45px;width: 45px;margin-bottom: 5px" src="assets/icon/boshi.png"><br>
            擂主<br>风采
          </div>
        </ion-col>
      </ion-row>
      <br>
    </ion-grid>




    <!--九宫格
    <div class="myteskicon">
      <div class="w33">
        <page-photoicon [icon]="'ionic'" [title]="'作品广场'" style="color:lightskyblue "  (click)="zuopinEvent()"></page-photoicon>
      </div>
      <div class="w33">
        <page-photoicon [icon]="'ionitron'" [title]="'热门活动'" style="color: lightskyblue" (click)="huodongEvent()"></page-photoicon>
      </div>
      <div class="w33">
        <page-photoicon [icon]="'apps'" [title]="'科普基地'" style="color: lightskyblue" (click)="kepuEvent()"></page-photoicon>
      </div>
      <div class="w33">
        <page-photoicon [icon]="'people'" [title]="'擂主风采'" style="color: lightskyblue" (click)="bozhulistEvent()"></page-photoicon>
      </div>
      <div class="clearfloat"></div>
    </div>
    -->
    <!-- zuopin guangchang -->
    <div style="width: 100%;height: 44px;margin-top: 5px;padding: 11px" >

      <div style="width: 10%;height: 22px;float: left;margin:0 auto;">
        <img style="width: 22px;height: 22px;alignment: center" src="assets/icon/zuopinindex1.png">
      </div>

      <div style="width: 40%;height: 22px;float: left;font-size: 19px;text-align: left;">
      作品秀场
      </div>

      <div style="width: 50%;height: 22px;float: right;margin:0 auto;text-align: right;font-size: 16px" (click)="zuopinEvent()">
        更多作品>
      </div>
    </div>
    <!-- 作品内容 -->
    <!-- 第一行 -->
    <div class="container-fluid" style="margin-top: 5px;">
      <div class="row">
        <!--<div class="masonry">-->
        <!--<ng-container *ngFor="let item of zuopinlistitem;let i=index;">

            <zuopin [listitemzuopin]="item" ></zuopin>

        </ng-container>-->
        <!--</div>-->
        <zuopin [listitemzuopin]="zuopinlistitem" ></zuopin>
      </div>
    </div>
    <!-- 横线 -->
    <hr style="background-color: white; height:22px;">
    <!-- re men huodong header-->
    <div style="width: 100%;height: 44px;margin-top: 5px;padding: 11px" >

      <div style="width: 10%;height: 22px;float: left;margin:0 auto;">
        <img style="width: 22px;height: 22px;alignment: center" src="assets/icon/huodong_home.png">
      </div>

      <div style="width: 40%;height: 22px;float: left;font-size: 19px;text-align: left;">
        科普活动
      </div>

      <div style="width: 50%;height: 22px;float: right;margin:0 auto;text-align: right;font-size: 16px" (click)="huodongEvent()">
        更多活动>
      </div>
    </div>
    <!-- 活动列表 -->
    <!--头部banner-->
    <div style="padding: 11px">
    <div class="slider-container" style="background-color: white;border-radius: 6px 6px 6px 6px">
      <ion-slides #slides pager="true"  pager loop="true" autoplay="3000" *ngIf="tasklisthuodong['length']>0">
        <ng-container *ngFor="let info of tasklisthuodong;let i=index;">
          <ion-slide >
            <div class="slide" style="margin-top: 5px;margin-left: 5px;margin-right: 5px" >
              <img  style="width: 100%;height: 188px" src="http://www.bkqs8.com/photo/weChatApi/loadImg?path=activity&filename={{info['img']}}" (click)="querymore(info['id'])"/>
              <!--<p class="slide-title">{{info['title']}}</p>-->
              <div style="color: #3c3c3c; text-align: left;position: absolute;bottom: 0;left: 5;background-color: rgba(242,242,242,0.6);width: 100%;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;border-radius:1%">
                {{info['title']}}
              </div>
              <!--<p class="slide-text">活动结束时间{{info['endTime']}}</p>-->
            </div>
          </ion-slide>
        </ng-container>

      </ion-slides>
    </div>
    </div>
    <!--<div style="width: 100%;padding: 11px">
      <huodonlist [listitemhuodong]="tasklisthuodong"></huodonlist>
    </div>-->
    <br>
    <!--&lt;!&ndash; 百科讲堂 &ndash;&gt;-->
    <!--<div style="width: 100%;height: 44px;margin-top: 5px;padding: 11px" >-->

      <!--<div style="width: 10%;height: 22px;float: left;margin:0 auto;">-->
        <!--<img style="width: 22px;height: 22px;alignment: center" src="assets/icon/homehd.png">-->
      <!--</div>-->

      <!--<div style="width: 40%;height: 22px;float: left;font-size: 19px;text-align: left;">-->
        <!--科普讲堂-->
      <!--</div>-->

      <!--<div style="width: 50%;height: 22px;float: right;margin:0 auto;text-align: right;font-size: 16px" (click)="baikeEvent()">-->
        <!--更多>-->
      <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash; 百科讲堂 &ndash;&gt;-->
    <!--<div style="width: 100%;">-->
      <!--<baikelist [listitembaike]="tasklistbaike"></baikelist>-->
    <!--</div>-->
    <!--<br>-->
    <!-- 横线
    <div style="width: 100%;height: 2px;background-color: #c8dcff;margin-top: 5px;margin-bottom: 5px"></div> -->
    <!-- 博主风采 header-->
    <div style="width: 100%;height: 44px;margin-top: 5px;padding: 11px" >

      <div style="width: 10%;height: 22px;float: left;margin:0 auto;">
        <img style="width: 22px;height: 22px;alignment: center" src="assets/icon/boshi.png">
      </div>

      <div style="width: 40%;height: 22px;float: left;font-size: 19px;text-align: left;">
        科普擂主
      </div>

      <div style="width: 50%;height: 22px;float: right;margin:0 auto;text-align: right;font-size: 16px" (click)="bozhulistEvent()">
        更多擂主>
      </div>
    </div>

    <!-- bozhu zhanshi -->
    <div style="padding: 11px">
      <div class="slider-container" style="background-color: white;border-radius: 6px 6px 6px 6px">
        <ion-slides #slides pager="true"  pager loop="true" autoplay="3000" *ngIf="tasklisthuodong['length']>0">
          <ng-container *ngFor="let info of tasklistbozhu;let i=index;">
            <ion-slide >
              <div class="slide" style="margin-top: 5px;margin-left: 5px;margin-right: 5px" >
                <div style="width: 100%;height: 200px" >
                  <div style="width: 45%;float: left;height: 200px">
                    <img style="height: 200px;width: 100%;padding: 9px" src="http://www.bkqs8.com/photo/weChatApi/loadImg?path=champion&filename={{info['img']}}" (click)="querymorebozhu(info['id'])">
                  </div>
                  <div style="width: 55%;float: right;height: 200px;padding: 11px">

                      <p>{{info['championName']}}<p>
                      <!--<div [innerHTML]="assembleHTML(info['championRemark'])" style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-height: 110px;"></div>-->

                    <!--<ion-item style="height: 180px;">-->

                      <p>{{info['professionalField']}}</p>
                      <p>{{info['sign']}}</p>
                    <!--</ion-item>-->
                  </div>

                </div>
                <!--<p style="text-align: right;color: coral" (click)="querymorebozhu(info['id'])">点击了解更多 ></p>-->
              </div>
            </ion-slide>
          </ng-container>

        </ion-slides>
      </div>
    </div>
    <!--<div >
      <bozhulist [isshowSearch]=false [listitembozhu]="tasklistbozhu"></bozhulist>
    </div>-->
    <br>
    <!-- 科普基地 header-->
    <div style="width: 100%;height: 44px;margin-top: 5px;padding: 11px" >

      <div style="width: 10%;height: 22px;float: left;margin:0 auto;">
        <img style="width: 22px;height: 22px;alignment: center" src="assets/icon/jianzhu_home.png">
      </div>

      <div style="width: 40%;height: 22px;float: left;font-size: 19px;text-align: left;">
        科普基地
      </div>

      <div style="width: 50%;height: 22px;float: right;margin:0 auto;text-align: right;font-size: 16px" (click)="kepuEvent()">
        更多基地>
      </div>
    </div>
    <!-- kepujidi neirong -->
    <!--<div >
    <jidi [listitem]="tasklist"></jidi>
    </div>-->
    <div style="padding: 11px">
      <div class="slider-container" style="background-color: white;border-radius: 6px 6px 6px 6px">
        <ion-slides #slides pager="true"  pager loop="true" autoplay="3000" *ngIf="tasklist['length']>0">
          <ng-container *ngFor="let info of tasklist;let i=index;">
            <ion-slide >
              <div class="slide" style="margin-top: 5px;margin-left: 5px;margin-right: 5px;" >
                <ion-card >
                  <img style="margin: 0 auto" src="http://www.bkqs8.com/photo/weChatApi/loadImg?path=science&filename={{info['img']}}" (click)="querymorejidi(info['id'])"/>
                  <ion-card-content>
                    <ion-card-title>
                      {{info['title']}}
                    </ion-card-title>
                    <!--<p style="color: #8c8c8c; padding: 5px;margin-top: 5px;margin-bottom: 5px">
                      {{info['remark']}}
                    </p>-->
                    <br>
                    <!--<p style="text-align: right;color: coral" (click)="querymorejidi(info['id'])">点击了解更多 ></p>-->
                  </ion-card-content>
                </ion-card>
              </div>
            </ion-slide>
          </ng-container>

        </ion-slides>
      </div>
    </div>
    <span>京ICP备19005529号-1</span>
  </ion-list>
</ion-content>
